<!--
 * @Author: coocase
 * @Date: 2021-04-07 14:54:27
 * @LastEditTime: 2021-06-09 14:17:25
 * @LastEditors: coocase
 * @Description: 支付页
 * @FilePath: \git\dami\src\pages\pay\pay.vue
-->
<template>
  <div class="wrap">
    <header class="header">
      <Row>
        <Col span="14">
          <div class="title" style="margin-left: 40px">
            【{{ moiveName.itemName }}】
          </div>
        </Col>
        <Col span="10">
          <div class="date">
            <DatePicker
              type="date"
              :options="options"
              placeholder="Select date"
              style="width: 200px"
            ></DatePicker>
            <Dropdown style="margin-left: 20px">
              <Button type="default" v-if="buydatas.startTime">
                {{ getDate }}
                <Icon type="ios-arrow-down"></Icon>
              </Button>
              <DropdownMenu slot="list">
                <DropdownItem
                  v-for="item in buydatas.startTime"
                  :key="item.id"
                  v-if="buydatas.startTime.length"
                  @click.native="dateClick"
                  name="item.id"
                  >{{ item.time }}</DropdownItem
                >
              </DropdownMenu>
            </Dropdown>
          </div>
        </Col>
      </Row>
    </header>

    <Layout>
      <Header class="title-price-list">
        <Row>
          <Col span="12" class="list">
            <span class="list-title"></span>
            <Button
              class="title-price-box"
              type="text"
              v-for="(item, index) in getprice"
              :key="index"
              v-if="getprice.length"
            >
              <svg
                class="icon"
                aria-hidden="true"
                :style="{ color: seatColor(index + 2) }"
              >
                <use xlink:href="#icon-loveseat"></use>
              </svg>
              <span class="price">{{ item }}元</span>
            </Button>
          </Col>
          <Col span="12">
            <div class="tips">
              <div class="tip">
                <svg class="icon" aria-hidden="true" style="color: #666666">
                  <use xlink:href="#icon-loveseat"></use>
                </svg>
                <span class="tips-text"> 不可选</span>
              </div>

              <div class="tip">
                <svg class="icon" aria-hidden="true" style="color: #4289c4">
                  <use xlink:href="#icon-zuowei"></use>
                </svg>
                <span class="tips-text"> 选中</span>
              </div>
            </div>
          </Col>
        </Row>
      </Header>
      <Layout class="select-seat">
        <Content>
          <!-- <seat @getSeat="getSeat"></seat> -->
          <div class="seat-box">
            <div
              class="row"
              v-for="(row, index) in seats.state"
              :key="'row' + index"
              v-if="seats.state.length"
            >
              <!-- <span class="row-id">{{index}}</span> -->
              <div class="column">
                <span
                  class="price-box"
                  v-for="(column, index1) in row"
                  :key="'col' + index1"
                >
                  <svg
                    :class="iconStyle(column, index, index1)"
                    aria-hidden="true"
                  >
                    <!-- :style="{ color: seatColor(column) }" -->
                    <use
                      class="seat"
                      xlink:href="#icon-loveseat"
                      @click="
                        column == 1 || column == 3
                          ? addOrDel(index, index1)
                          : ''
                      "
                    ></use>
                  </svg>
                </span>
              </div>
            </div>
          </div>
        </Content>
        <Sider hide-trigger width="300" class="sider">
          <div class="select-result">
            <div class="result-header">
              <span class="header-title"> 已选票品</span>
              <a class="clear-btn" @click="clearSelect()">清空</a>
            </div>
            <div class="result-contain">
              <div
                class="selected-title"
                v-for="(level, index) in levelFilters"
                :key="'level' + index"
                v-if="levelFilters.length"
              >
                {{ price(level) }}元

                <div
                  class="selected"
                  v-for="(levelSeat, index) in levelCount(level)"
                  :key="'levelSeat' + index"
                >
                  <svg
                    class="icon"
                    aria-hidden="true"
                    :style="{
                      color: seatColor(levelSeat[2]),
                    }"
                  >
                    <use xlink:href="#icon-zuowei"></use>
                  </svg>
                  <span>{{ levelSeat[0] + 1 }}排{{ levelSeat[1] }}号</span>
                  <svg
                    class="icon close"
                    aria-hidden="true"
                    style="color: #666; float: right"
                    @click="deleSelect(index, levelSeat[0], levelSeat[1])"
                  >
                    <use xlink:href="#icon-searchclose"></use>
                  </svg>
                </div>
              </div>
            </div>
            <div class="total-price">
              <span class="total-price-tip">合计</span>
              <span class="total-price-money"
                >￥{{ this.selected.length * 39.9 }}</span
              >/
              <span class="total-price-tip2"
                >共{{ this.selected.length }}张</span
              >

              <Button type="text"
                >价格明细
                <Icon type="ios-arrow-up" />
              </Button>
              <Modal v-model="modal" width="400">
                <p slot="header" class="model-header">
                  <span class="model-title">价格明细</span>
                  <span class="model-tip">实际优惠以订单确认页为准</span>
                </p>
                <div class="model-content">
                  <div class="price-list-title">商品信息</div>

                  <div
                    class="price-list"
                    v-for="list in levelFilters"
                    :key="list"
                    v-if="levelFilters.length"
                  >
                    <span class="price-list-price"
                      >{{ price(list) }}元 &times
                      {{ levelCount(list).length }}</span
                    >
                    <span class="price-list-total"
                      >￥{{ price(list) * levelCount(list).length }}.00</span
                    >
                  </div>
                </div>
                <div slot="footer" class="model-footer">
                  <span class="price-list-footer-tip">合计</span>
                  <span class="price-list-footer-total"
                    >￥{{ totalPrice() }}</span
                  >
                </div>
              </Modal>
            </div>
            <Button class="confirm" :to="{ name: 'Confirm' }">确认选座</Button>
          </div>
        </Sider>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import bus from "../../common/eventBus";
export default {
  name: "pay",
  components: {},
  data() {
    return {
      moiveName: JSON.parse(localStorage.getItem("itemInfo")),
      //iview date api
      modal: false,
      options: {
        disabledDate(date) {
          return date && date.valueOf() < Date.now() - 86400000;
        },
      },
      buydatas: "",
      selected: [], //选择的作为
      seats: [], //座位布局信息
      levelFilters: [], //有哪些等级的座位
      selectedCount: 0,
      dateSelect: "",
    };
  },
  computed: {
    getprice() {
      var arr = [];
      if (this.buydatas.itemPrice) {
        //不做判断的话，数据不存在时则会报错 foreach 未定义
        this.buydatas.itemPrice.forEach((el) => {
          arr.push(el.price);
        });
      }
      for (let i = 0; i < arr.length - 1; i++) {
        for (let j = 0; j < arr.length - 1 - i; j++) {
          if (arr[j] > arr[j + 1]) {
            let el = arr[j + 1];
            arr[j + 1] = arr[j];
            arr[j] = el;
          }
        }
      }
      return arr;
    },
    getDate: function () {
      if (this.dateSelect) {
        return this.dateSelect;
      } else if (this.buydatas.startTime) {
        return this.buydatas.startTime[0].time;
      } else return "xxxx-xx-xx xx:xx:xx";
      // return this.dateSelect?this.dateSelect:this.buydatas.startTime[0].time?this.buydatas.startTime[0].time:'2007-05-15 03:45:09'
    },
  },
  methods: {
    dateClick: function (e) {
      console.log(e.target.innerHTML);
      this.dateSelect = e.target.innerHTML;
    },
    addOrDel: function (r, c) {
      //判断当前状态码，进行切换状态及样式
      var level = this.seats.level[r][c];
      this.iconChange(r, c);
      // if (e.currentTarget.getAttribute("xlink:href") == "#icon-loveseat")
      if (this.seats.state[r][c] == 1) {
        //   this.$set(this.selected,this.selectedCount, [r, c, level])
        //满足条件添加数据
        this.selected.push([r, c, level]);
        //设置状态
        this.seats.state[r][c] = 3;
        //判断是否保存过此等级 没保存则添加
        if (this.levelFilters.indexOf(level) == -1) {
          this.levelFilters.push(level);
        }
        //选座计数
        this.selectedCount++;
      } else {
        for (let i = 0; i < this.selected.length; i++) {
          const el = this.selected[i];
          //循环判断获取要删除的下标 i 通过i删除数据
          if (el[0] == r && el[1] == c) {
            this.selected.splice(i, 1);
            //判断此等级的数据是否还有，没有则清除此等级标志
            if (this.levelCount(level).length == 0) {
              console.log("clear");
              this.levelFilters.splice(this.levelFilters.indexOf(level), 1);
            }
            //改变状态码
            this.seats.state[r][c] = 1;
            //计数
            this.selectedCount--;
          }
        }
      }
    },
    clearSelect() {
      //清除全部选择的座位
      this.selected.splice(0, this.selected.length);
    },
    deleSelect(index, r, c) {
      this.addOrDel(r, c);
    },
    // 座位等级
    iconChange(r, c) {
      // 修改图标
      var el = document.getElementsByClassName("icon" + r + c);
      if (this.seats.state[r][c] == 1) {
        el[0].childNodes[0].setAttribute("xlink:href", "#icon-zuowei");
      } else {
        el[0].childNodes[0].setAttribute("xlink:href", "#icon-loveseat");
      }
    },
    // 根据价位过滤数据
    levelCount(level) {
      return this.selected.filter((item) => {
        return item[2] == level;
      });
    },

    //根据等级返回价格
    price: function (level) {
      var price = 0;
      switch (level) {
        case 3:
          price = this.getprice[3];
          break;
        case 4:
          price = this.getprice[2];
          break;
        case 5:
          price = this.getprice[1];
          break;
        default:
          price = this.getprice[0];
          break;
      }
      return price;
    },
    totalPrice() {
      var total = 0;
      for (let i = 0; i < this.levelFilters.length; i++) {
        var level = this.levelFilters[i];
        var count = this.levelCount(level).length;
        var price = this.price(level);
        total = total + price * count;
      }
      return total;
    },
    iconStyle(column, index, index1) {
      //根据状态来修改样式
      var str = " icon" + index + index1;
      var classnname = "";
      if (column == 1) {
        switch (this.seats.level[index][index1]) {
          case 3:
            str += " level3";
            break;
          case 4:
            str += " level4";
            break;
          case 5:
            str += " level5";
            break;
          default:
            break;
        }
        classnname = "icon icon-zuowei" + str;
      } else if (column == 0) {
        classnname = "icon cant " + str;
      } else if (column == 2) {
        classnname = "icon none " + str;
      } else if (column == 3) {
        classnname = "icon icon-selected" + str;
      }
      return classnname;
    },
    //根据等级设置颜色
    seatColor(level) {
      var color = "";
      switch (level) {
        case 3:
          color = "#ff6390";
          break;
        case 4:
          color = "#ff4040";
          break;
        case 5:
          color = "#47b1f1";
          break;
        default:
          color = "#b36b0d";
          break;
      }
      return color;
    },
    getSeats() {
      //获取座位数据
      this.$http
        .getRequest({
          api: "seats",
          data: {},
        })
        .then((res) => {
          this.seats = res;
        })
        .catch((err) => {});
    },
    getDetail: function () {
      this.$http
        .getRequest({
          api: "detail",
          data: {},
        })
        .then((res) => {
          this.buydatas = res;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created: function () {
    bus.$off("buydatas").$on("buydatas", (paydatas) => {
      this.buydatas = paydatas;
    });
  },
  beforeDestroy() {
    bus.$emit("paydatas", this.buydatas, this.selected);
  },
  mounted: function () {
    this.getSeats();
    if (!this.buydatas.itemName) {
      this.getDetail();
    }
  },
  beforeUpdate() {},
};
</script>

<style scoped>
ul,
li {
  list-style: none;
}
.wrap {
  height: 100%;
  max-height: 890px;
}
.ivu-layout {
  height: 100%;
  max-height: 835px;
}
.ivu-layout-sider,
.ivu-layout-content {
  background-color: #fdfdfd;
}
.ivu-layout-header {
  background-color: #f8f8f8;
  height: 30px;
  line-height: 14px;
  margin: 10px;
}
.red {
  color: red;
}
.green {
  color: green;
}
.wrap {
  width: 100%;
  margin: 0 auto;
}
.header {
  margin: 20px 0px;
}
.title {
  float: left;
  margin-left: 20px;
  font-size: 22px;
  font: bolder;
  color: black;
}
.date {
  float: right;
  margin-right: 20px;
}
.list {
  margin: 0 auto;
}
.list-title {
  color: black;
}
.icon-loveseat {
  color: black;
}
.title-price-list,
.title-price-box {
  background-color: rgb(221, 221, 221);
  height: 32px;
  margin: 10px 0;
}
.title-price-box {
  display: inline-block;
  font-size: 12px;
  margin: 0 6px;
  line-height: 14px;
  padding: 8px;
}
.tips {
  float: right;
}
.tip {
  display: inline-block;
  line-height: 32px;
  margin: 0 5px;
}

.select-seat {
  height: 100%;
  max-height: 755px;
}
.sider {
  box-shadow: -2px 0 16px 0 hsl(0deg 0% 86% / 50%);
}
.select-result {
  display: flex;
  flex-direction: column;
  padding: 8px;
  height: 100%;
}
.result-header {
  display: flex;
  justify-content: space-between;
}
.header-title {
  padding: 10px;
}
.result-contain {
  flex: 1;
}
.selected {
  margin: 10px 0;
  padding: 0 10px;
}
.selected span {
  cursor: pointer;
}
.selected:hover {
  background-color: rgb(226, 226, 226);
}

.icon.close {
  display: none;
  cursor: pointer;
}
.icon-zuowei {
  color: #f15d43;
}
.cant {
  color: #666;
}
.none {
  opacity: 0;
}
.icon-selected {
  color: #ff1268;
}
.selected:hover .icon.close {
  display: inline-block;
  cursor: pointer;
  margin-top: 3px;
}
.confirm {
  margin: 10px;
  height: 40px;
  background-color: #ff1268;
  border: none;
  color: white;
  padding: 0 15px;
  cursor: pointer;
}
.seat-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.row {
  padding: 2px;
}
.column {
  padding: 2px;
}
.price-box {
  padding: 8px;
  font-size: 20px;
}
.icon-zuowei:hover,
.icon-selected:hover {
  cursor: pointer;
  position: relative;
  font-size: 25px;
  transition: 0.1s;
}

.level-default {
  color: #b36b0d;
}
.level3 {
  color: #ff6390;
}
.level4 {
  color: #ff4040;
}
.level5 {
  color: #47b1f1;
}
.total-price {
  margin-left: 10px;
  font-weight: bold;
}
.total-price-money {
  margin-left: 10px;
  color: #ff1268;
  font-size: 18px;
}
.total-price-tip2 {
  font-size: 12px;
}
.model-header {
  margin: 20px;
}
.model-title {
  font-size: 20px;
}
.model-tip {
  font-size: 12px;
  color: #666;
  margin-left: 20px;
}
.model-content {
  margin-left: 20px;
}
.price-list-title {
  font-size: 14px;
  font-weight: bolder;
}

.price-list {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.model-footer {
  margin-left: 20px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.price-list-footer-tip {
  font-size: 16px;
  font-weight: bold;
}
.price-list-footer-total {
  font-size: 25px;
  color: #ff1268;
}
</style>
